<template>
  <!--  数据报表-->
  <div class="box-view">
    <el-row :gutter="5">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <el-button icon="el-icon-download" class="common_btn-defalut"
                   style="margin-left: 20px;margin-bottom: 10px"
                   @click="downloadTaiZhang">下载当前台账
        </el-button>
        <el-table height="74vh" stripe :data="taiZhangList" border style="width: 100%;">
          <el-table-column label="序号" width="90">
            <template slot-scope="scope">
              {{ getIndex(scope.$index) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="deptName" min-width="120" show-overflow-tooltip
                           label="养管单位"></el-table-column>

          <el-table-column align="center" prop="riskCount4" label="一级风险" min-width="40"></el-table-column>
          <el-table-column align="center" prop="riskCount3" label="二级风险" min-width="40"></el-table-column>
          <el-table-column align="center" prop="riskCount2" label="三级风险" min-width="40"></el-table-column>
          <el-table-column align="center" prop="riskCount1" label="四级风险" min-width="40"></el-table-column>
          <el-table-column align="center" prop="riskCount0" label="风险合计" min-width="40"></el-table-column>
          <el-table-column align="center" prop="slopeCount" label="边坡采集数" min-width="40"></el-table-column>
          <el-table-column align="center" label="灾害类别">
            <el-table-column label="崩塌" align="center" min-width="40" prop="damageCount1">

            </el-table-column>
            <el-table-column label="滑坡" align="center" min-width="40" prop="damageCount2">

            </el-table-column>
            <el-table-column label="泥石流" align="center" min-width="40" prop="damageCount3">

            </el-table-column>
            <el-table-column label="沉陷与塌陷" align="center" min-width="70" prop="damageCount4">

            </el-table-column>
            <el-table-column label="水毁" align="center" min-width="40" prop="damageCount5">

            </el-table-column>
          </el-table-column>
          <el-table-column align="center" prop="damageCount" label="灾害合计" min-width="40"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>

<script>
  import {
    getTaiZhangData,
    downloadTaiZhang,

  } from '@/services/model/damageReport'
  import OrganizationTree from '@/components/organization-tree/all'
  import XLoading from '@/components/animation/x-loading.vue'

  export default {
    components: {OrganizationTree, XLoading},
    data() {
      return {
        taiZhangList: [],
        isLoading: false,
        // 表单
        form: {
        },
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
      }
    },
    mounted() {
    },
    computed: {
    },
    methods: {

      //下载
      async downloadTaiZhang() {
        this.isLoading=true
        await downloadTaiZhang(this.form)
        this.isLoading=false
      },

      //获取台账报表
      async getTaiZhangLists() {
        this.isLoading=true
        this.form.startCreateTime = this.time
        this.form.endCreateTime = this.timeEnd
        let res = await getTaiZhangData(this.form)
        this.taiZhangList = res.data || []
        this.isLoading=false
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.getTaiZhangLists()
      },
      getIndex(index) {
        let param = index + 1;
        return param;
      },
    }
  }
</script>

<style scoped="scoped" lang="less">
  /deep/ .el-table th > .cell {
    padding: 0px 0px !important;
  }

  /deep/ .el-table__expanded-cell {
    background: #d3d3d3;
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }
</style>
